<template>
	<div class="intent-libary-wrapper">
		<el-form-item label="意图库" :prop="prop" required="true">
			<el-select :value="value" :disabled="showDetail || nluError" @change="onChangeIntentLibary" placeholder="请选择意图库" style="width: 90%">
				<el-option v-for="item in intentLib" :key="item.intentlib" :label="item.intentlib" :value="item.intentlib"></el-option>
			</el-select>
		</el-form-item>
		<p class="note">{{ desc }}</p>
	</div>
</template>

<script>
import { getIntentLibaryList } from '@/api/api';
export default {
	props: {
		value: {
			type: String,
			required: true,
			default: () => ''
		},
		showDetail: {
			type: Boolean,
			default: () => false
		},
		prop: {
			type: String,
			required: true,
			default: () => ''
		},
		nluError: {
			type: Boolean,
			default: () => false
		}
	},

	data() {
		return {
			intentLib: [],
			desc: ''
		};
	},

	watch: {
		value(val) {
			this.$nextTick(() => {
				this.getIntentLib();
			});
		}
	},

	mounted() {
		this.getIntentLib();
	},

	methods: {
		// 获取意图库和意图点
		getIntentLib() {
			// 调用意图库接口
			getIntentLibaryList('ivvr', 1, 10)
				.then(res => {
					console.log(res.data);
					this.intentLib = res.data.intentlibs;
				})
				.then(() => {
					let intentLib = this.intentLib.find(item => item.intentlib === this.value);
					this.desc = intentLib?.note || '';
					console.log(this.value);
				})
				.catch(err => {
					this.$message.error('获取意图库失败');
					console.log('getIntentLib error', err);
				});
		},
		onChangeIntentLibary(val) {
			console.log(this.intentLib);
			let intentLib = this.intentLib.find(item => item.intentlib === val);
			this.desc = intentLib?.note || '';
			console.log(this.desc);
			this.$emit('input', this.prop, val);
		}
	}
};
</script>

<style scoped>
.el-form-item {
	margin-bottom: 10px;
}
.note {
	padding-left: 120px;
	color: #999;
}
</style>
